<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div class="buttonBox">
          <span style="color: pink; font-size: 14px"
            >说明:目前支持学科和关键字条件筛选</span
          >
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="handleAddQuestion"
            >新增试题</el-button
          >
        </div>
        <br />
        <el-form ref="formData" label-width="80px">
          <!-- 第一行 -->
          <!-- @change="handleChange" -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  @change="handleChange"
                  v-model="form.subjectID"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in simpleSubjectArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  v-model="form.catalogID"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in simpleDirectoryArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item  label="标签">
                <el-select
                  v-model="form.tags"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in simpleTagsArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="keyword" label="关键字">
                <el-input v-model="form.keyword" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item prop="questionType" label="试题类型">
                <el-select
                  v-model="form.questionType"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in questionTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="difficulty" label="难度">
                <el-select
                  v-model="form.difficulty"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in difficultys"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="direction" label="方向">
                <el-select
                  v-model="form.direction"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in directions"
                    :key="item.index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="creatorID" label="录入人">
                <el-select
                  v-model="form.creatorID"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in userArr"
                    :key="item.id"
                    :label="item.username"
                    value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item prop="remarks" label="题目备注">
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="shortName" label="企业简称">
                <el-input v-model="form.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="province" label="城市">
                <el-select
                  v-model="form.province"
                  placeholder="请选择"
                  style="width: 48%; margin-right: 2%"
                >
                  <el-option
                    v-for="item in cityList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="form.city"
                  placeholder="请选择"
                  style="width: 50%"
                >
                  <el-option
                    v-for="item in areaList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="text-align: right">
              <el-from-item>
                <el-button @click="handleClear">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-from-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- Tab标签页 -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first"></el-tab-pane>
          <el-tab-pane label="待审核" name="second"></el-tab-pane>
          <el-tab-pane label="已审核" name="third"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
        </el-tabs>
        <!-- 提示框 -->
        <el-alert
          :closable="false"
          :title="`数据一共${total}条`"
          type="info"
          show-icon
        >
        </el-alert>
        <br />
        <!-- 表格 -->
        <el-table
          :header-cell-style="{ background: '#f0f4ff' }"
          :data="tableData.slice((page - 1) * size, page * size)"
          stripe
        >
          <el-table-column
            prop="number"
            align="center"
            label="试题编号"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="subject"
            align="center"
            label="学科"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="catalog"
            align="center"
            label="目录"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="questionType"
            :formatter="formatQuestionType"
            align="center"
            label="题型"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="question"
            align="center"
            label="题干"
            width="350"
          >
            <template #default="{ row }">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column
            :formatter="formatting"
            prop="chkDate"
            align="center"
            label="录入时间"
            width="350"
          >
          </el-table-column>
          <el-table-column
            prop="difficulty"
            :formatter="formatDifficulty"
            align="center"
            label="难度"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="creator"
            align="center"
            label="录入人"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="chkState"
            :formatter="formatChkState"
            align="center"
            label="审核状态"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="chkRemarks"
            align="center"
            label="审核意见"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="chkUser"
            align="center"
            label="审核人"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="publishState"
            :formatter="formatPublishState"
            align="center"
            label="发布状态"
            width="150"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="200"
          >
            <template #default="{ row }" style="text-align: center">
              <el-button @click="questionLook(row)" type="text" size="small"
                >预览</el-button
              >
              <el-button
                @click="checkFn(row)"
                type="text"
                size="small"
                :disabled="row.chkState !== 0"
                >审核</el-button
              >
              <el-button
                :disabled="row.publishState === 0"
                @click="handleEditQuestion"
                type="text"
                size="small"
                >修改</el-button
              >
              <el-button
                @click="upDownPublishFn(row)"
                type="text"
                size="small"
                >{{ row.publishState === 1 ? "上架" : "下架" }}</el-button
              >
              <el-button
                :disabled="row.publishState === 0"
                @click="del(row)"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          style="text-align: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
          :page-size="size"
          layout="  prev, pager, next, sizes,jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </div>
    <!-- ------------------------------- -->
    <!-- 预览框 -->
    <questionsPreview :showDialog.sync="showDialog"  :data="questionFormation" ref="questionsPreview">
    </questionsPreview>
    <!-- 审核栏 -->
    <questionCheck
      @submit-remark="getQuestionsList"
      :data="questionFormation"
      ref="questionCheck"
    ></questionCheck>
    <!-- --------------------------------- -->
  </div>
</template>

<script>
import dayjs from 'dayjs'
import {
  choice as choiceList,
  choicePublish,
  remove
} from '@/api/hmmm/questions.js'
import { simple as subjectSimpleList } from '@/api/hmmm/subjects.js'
import { simple as directoryList } from '@/api/hmmm/directorys.js'
import { simple as listTags } from '@/api/hmmm/tags.js'
import { simple as userSimple } from '@/api/base/users.js'
import {
  questionType,
  difficulty,
  chkType,
  publishType,
  direction
} from '@/api/hmmm/constants.js'
import { provinces as getCity } from '@/api/hmmm/citys'
import questionsPreview from '../components/questions-preview.vue'
import questionCheck from '../components/questions-check.vue'
export default {
  name: 'lixiaoyue',
  data () {
    return {
      // 切换到第几页
      page: 1,
      // 当前页面
      size: 5,
      // 数据总条数
      total: 0,
      // 是否选中
      radio: '1',
      // 对话框显示和隐藏
      dialogVisible: false,
      // 试题信息
      questionFormation: {},
      form: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        keyword: null,
        difficulty: null,
        questionType: null,
        question: null,
        id: null,
        tags: null,
        province: null,
        city: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        chkState: null
      },
      // 试题类型
      questionTypes: questionType,
      // 难度类型
      difficultys: difficulty,
      // 方向
      directions: direction,
      // 城市
      cityList: getCity(),
      // 获取地区
      areaList: [],
      // 用户简单信息列表
      userArr: [],
      // 题目预览
      showDialog: false,
      // 表格数组
      tableData: [],
      // 学科简单列表
      simpleSubjectArr: [],
      // 标签列表
      simpleDirectoryArr: [],
      // 标签简单列表
      simpleTagsArr: [],
      // 分页标签默认选中
      activeName: 'first'
    }
  },
  components: {
    questionCheck,
    questionsPreview
  },

  created () {
    // 获取精选题库列表
    this.getQuestionsList()
    // 获取学科简单列表(一级)
    this.getSimpleSubjectList()
    // 获取目录信息列表
    this.getDirectoryList()
    // 获取标签简单列表
    this.getSimpleTags()
    // 获取用户简单信息
    this.getSimpleUser()
  },
  methods: {
    // 搜索一
    search () {
      this.getQuestionsList(this.form)
    },
    // 处理日期格式
    formatting (row, column, cellValue, index) {
      return dayjs(cellValue).format('YYYY-MM-DD-HH:mm:ss')
    },
    // 页面数据条数
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.size = val
    },
    // 当前页发生改变
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page = val
    },
    // 获取用户简单信息
    async getSimpleUser () {
      const { data: userArr } = await userSimple()
      console.log(userArr, 'user------------------')
      this.userArr = userArr
    },
    /**
     * 获取精选题库列表
     */
    async getQuestionsList (val) {
      const { data } = await choiceList(val)
      this.tableData = data.items
      console.log(data.items, 'list----------------------------------------')
      this.total = this.tableData.length
      this.id = data.id
      // 当前页数s
      // this.size = data.pages
      this.subjectID = data.subjectID
    },

    // 获取学科简单列表
    async getSimpleSubjectList () {
      const { data } = await subjectSimpleList()
      console.log(data, '-----------------------999')
      this.simpleSubjectArr = data
      // this.subject.subjectId = data.value
      // console.log(this.simpleSubjectArr, '123456')
    },
    // 点击切换标签内容
    async handleClick (tab, event) {
      console.log('切换了标签')
      console.log(tab.name, '被点击')
      if (tab.name === 'first') {
        const { data: yue } = await choiceList()
        console.log(yue, '33333333333333333333333')
      } else if (tab.name === 'second') {
        const { data } = await choiceList({ chkState: 0 })
        console.log(data, '*******')
        this.tableData = data.items
        this.total = data.items.length
      } else if (tab.name === 'third') {
        const { data } = await choiceList({ chkState: 1 })
        console.log(data, '11111100')
        this.tableData = data.items
        this.total = data.items.length
      } else if (tab.name === 'fourth') {
        const { data } = await choiceList({ chkState: 2 })
        console.log(data, '9999999---')
        this.tableData = data.items
        this.total = data.items.length
      }
    // console.log(tab, event)
    },
    // 学科发生变化
    async handleChange (subjectID) {
      console.log(subjectID, '1111')
      this.form.catalogID = null
      this.form.tags = null
      if (subjectID) {
        const res = await directoryList({ subjectID })
        console.log(res, '000')
        // console.log(res.data.items, '6666666666666666666666666666')
        this.simpleDirectoryArr = res.data
        // 标签
        const res1 = await listTags({ subjectID })
        console.log(res1.items, '标签')
        this.simpleTagsArr = res1.data
      } else {
        this.simpleDirectoryArr = []
        this.simpleTagsArr = []
      }
    },
    // 新增试题
    handleAddQuestion () {
      this.$router.push('new')
    },
    // 修改试题
    handleEditQuestion () {
      this.$router.push('new')
    },
    // 点击审核
    checkFn (questionFormation) {
      this.$refs.questionCheck.dialogVisible = true
      this.questionFormation = questionFormation
      console.log(questionFormation.id, '这是审核')
    },
    // 点击预览框
    questionLook (val) {
      this.questionFormation = val
      this.showDialog = true
      // this.$nextTick(() => {
      //   this.$refs.questionsPreview.open()
      // })
    },
    // 点击上下架
    async upDownPublishFn (row) {
      this.$confirm(
        `您确定${row.publishState === 1 ? '上架' : '下架'}这道题目吗?`,
        '温馨提示',
        { type: 'warning' }
      ).then(async () => {
        console.log(row)
        row.publishState = row.publishState === 1 ? 0 : 1

        const res = await choicePublish(row)
        this.$message.success(
          `${row.publishState === 1 ? '下架' : '上架'}成功!`
        )
        this.getQuestionsList()
        console.log(res, '上下架-----------------')
      })
    },

    // 操作清除
    handleClear () {
      this.form = {
        page: 1,
        pagesize: 10,
        subjectID: null,
        keyword: null,
        difficulty: null,
        questionType: null,
        question: null,
        id: null,
        tags: null,
        province: null,
        city: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        chkState: null
      }
      this.$refs.formData.resetFields()
    },
    // 删除组题
    del (row) {
      console.log('点击了删除')
      this.$confirm('确定要删除吗', '温馨提示', { type: 'warning' }).then(
        async (flag) => {
          if (!flag) return
          await remove(row)
          this.$message.success('删除成功')
          this.getQuestionsList()
        }
      )
    },

    // 5. 处理题型格式
    formatQuestionType (row, column, cellValue, index) {
    // 运用枚举
    // console.log(questionType)
    // console.log(row.questionType)
      const obj = questionType.find((item) => item.value === +row.questionType) // 出错点
      // console.log(obj, '1111111111111111111')
      return obj ? obj.label : '未知题型'
    },
    // 6.处理难度格式
    formatDifficulty (row, column, cellValue, index) {
    // 运用枚举
    // console.log(difficulty)
    // console.log(row.questionType)
      const obj = difficulty.find((item) => item.value === +row.difficulty) // 出错点
      // console.log(obj, '1111111111111111111')
      return obj ? obj.label : '未知难度'
    },
    // 处理审核状态
    formatChkState (row, column, cellValue, index) {
      const obj = chkType.find((item) => item.value === +row.chkState)
      return obj ? obj.label : '未知状态'
    },
    // 处理审核意见
    formatChkRemarks (row, column, cellValue, index) {
      const obj = chkType.find((item) => item.value === +row.chkRemarks)
      return obj ? obj.label : '未知审核意见'
    },
    // 处理发布状态
    formatPublishState (row, column, cellValue, index) {
      const obj = publishType.find(
        (item) => item.value === +row.publishState + 1
      )
      return obj ? obj.label : '未知发布状态'
    }
  }
}
</script>

<style scoped>
.buttonBox {
  display: flex;
  justify-content: space-between;
}
</style>
